<template>
  <div class="boxss">
    <div class="flex flex flexJ">
      <div class="info-title">个人信息</div>
      <div class="flex flexa">
        <div class="edit" @click="editShopInfoFn" v-hasPermi="['shopCenter:editInfo']">修改资料</div>
        <div class="edit" @click="myHaibao">推广海报</div>
      </div>
    </div>
    <div class="flex info-con">
      <div class="info-img">
        <img :src="shopInfo.avatar" alt="头像">
      </div>
      <div class="flex-l info-text">
        <div class="">
          <span class="name">{{ shopInfo.tenantName }}</span>
          <span class="name-one">{{ userInfo.dept.deptName }}</span>
        </div>
        <div class="name-two"> {{ userInfo.nickName }}</div>
        <div class="name-two name-three"><span>官网:</span>
          <span class="link"
            @click="copyStr(shopInfo.domain && shopInfo.domain.includes(',') ? shopInfo.domain.split(',')[0] : shopInfo.domain)">{{
              shopInfo.domain && shopInfo.domain.includes(',') ? shopInfo.domain.split(',')[0] : shopInfo.domain }}</span>
        </div>
        <div class="flex tags flexa">

          <img @click="openAuth" v-if="shopInfo.authType == 2 || shopInfo.authType == 3 || shopInfo.authType == 6" class="imgs"
            src="@/assets/img/index/comp3-3.png" alt="已认证">
          <div @click="openAuth" class="no-tags" v-else>未认证</div>
          <img class="imgs" src="@/assets/img/index/comp-3-5.png" @click="goLink('/huoyuan/youzhishangjia')"
            v-if="shopInfo.isQuality == 2" alt="">
          <div class="no-tags" v-else>优质商家</div>

       
          <!-- <div>保证金</div> -->
          <img  class="imgs" src="@/assets/img/index/comp-3-6.png">

            <img class="imgs"
            @click="goLink('/jifenshangcheng')"
            src="@/assets/img/index/comp-3-8.png" alt=""
            v-if="shopInfo && shopInfo.baseServer==2">
          <div class="no-tags" @click="goLink('/jifenshangcheng')" v-else>基础服务包</div>

          <!-- <div>9折供货</div> -->
          <img class="imgs"
            @click="goLink('/jifenshangcheng')"
            src="@/assets/img/index/comp-3-7.png" alt=""
            v-if="shopInfo && shopInfo.shopServer==2">
          <div class="no-tags" @click="goLink('/jifenshangcheng')" v-else>商城功能包</div>
        </div>
      </div>
    </div>
    <el-divider class="divider"></el-divider>
    <div class="flex flexJ tag-container">
      <div class="info-title">店铺账户</div>
      <!-- v-if="checkPermi(['shd:home:account'])" -->
      <div v-hasPermi="['financialManage:account']" class="flex flexa" @click="goLink('/tenantPages/finance/account')">
        <div class="edit">账户明细</div>
      </div>
    </div>
    <div class="flex flexJ info-container" style="flex-wrap: wrap;">
      <div class="info-container-img">
        <div class="info-title flex flexa">虞豆
          <div class="chongzhi" @click="chongzhijifen" v-hasPermi="['shd:home:yudouchongzhi']">
            <img src="@/assets/img/account/chongzhi.png" alt=""> 充值
          </div>
        </div>
        <div v-if="checkPermi(['shd:home:xianshiyudou'])" class="info-num"> {{ shopInfo.campNumber || '0' }}</div>
        <div v-else class="info-num"> **** </div>
      </div>

      <div class="info-container-img info-container-img-2">
        <div class="info-title flex flexa">余额
          <div class="chongzhi" @click="chongzhiyue" v-hasPermi="['shd:home:yudouchongzhi']">
            <img src="@/assets/img/account/chongzhi.png" alt=""> 充值
          </div>
        </div>
        <div v-if="checkPermi(['shd:home:xianshiyue'])" class="info-num">{{ shopInfo.availableMoney || '--' }}</div>
        <div v-else class="info-num">****</div>
      </div>


      <div style="margin-top: 8px;" class="info-container-img info-container-img-3">
        <div class="info-title flex flexa">短信
          <el-tooltip effect="dark" content="短信用于商城用户登录注册时发送验证码等需要给用户发送短信的场景。
                  每个商户每月有100条免费短信，超出后需购买。" placement="top">
            <img style="width: 16px;vertical-align: middle;margin-left: 2px;" src="../../assets/img/question.png" alt="问号">
          </el-tooltip>

           <div class="chongzhi" @click="smsChongzhiOpen" v-hasPermi="['shd:home:yudouchongzhi']">
            <img src="@/assets/img/account/chongzhi.png" alt=""> 充值
          </div>
        </div>
        <div v-if="checkPermi(['shd:home:xianshiyudou'])" class="info-num"> {{ shopInfo.smsSystemNum +
          shopInfo.smsPackageNum }} </div>
        <div class="info-num" v-else>
          ****
        </div>
      </div>

      <div style="margin-top: 8px;" class="info-container-img info-container-img-4">
        <div class="info-title flex flexa">保证金
            <div class="chongzhi" @click="openPayBZJ" v-if="shopInfo.marginState!=2&&!(TIXIANING&&TIXIANING.type==2)">
            <img src="@/assets/img/account/chongzhi.png" alt=""> 缴纳
          </div>
           <div class="chongzhi" @click="openPayBZJ" v-if="shopInfo.marginState==2&&shopInfo.marginMoney<BZJmoney">
            <img src="@/assets/img/account/chongzhi.png" alt=""> 缴纳
          </div>
        </div>
        <div class="info-num"> {{ shopInfo.marginMoney || '0.00' }} </div>
      </div>

    </div>
    <editShopInfo ref="editShopInfo"></editShopInfo>
    <haibaoDialog ref="haibaoDialog"></haibaoDialog>
    <chongzhi ref="chongzhi"></chongzhi>
    <chongzhiYue ref="chongzhiYue"></chongzhiYue>
    <smsChongzhi ref="smsChongzhi"></smsChongzhi>
     <payBZJ ref="payBZJ"></payBZJ>
      <authDialog ref="authDialog"></authDialog>
  </div>
</template>
<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import haibaoDialog from "@/views/tenantPages/shopManage/shopCenter/haibaoDialog.vue";
import editShopInfo from "@/components/common/editShopInfo.vue";
import authDialog from "@/views/tenantPages/shopManage/shopCenter/authDialog";

import chongzhi from "@/views/tenantPages/moneys/components/chongzhijifen.vue";
import chongzhiYue from "@/views/tenantPages/moneys/components/chongzhiYue.vue";
import smsChongzhi from "@/views/tenantPages/moneys/components/smsChongzhi.vue";
import payBZJ from "@/views/tenantPages/moneys/components/payBZJ.vue";
export default {
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  components: {
    chongzhi,
    editShopInfo,
    haibaoDialog,
    chongzhiYue , 
    smsChongzhi, 
    payBZJ,
    authDialog
  },
  data() {
    return {
       BZJmoney: "",
              TIXIANING: "",
    }
  },
  created() {
    this.getBZJ();
    this.getTixianing();
  },
  methods: {
        // 获取保证金金额
    getBZJ() {
      this.getDicts("marginMoney").then((res) => {
        //console.log("%c Line:271 🥕 res", "color:#42b983", res);
        if (res.data && res.data.length) {
          this.BZJmoney = res.data[0].dictValue;
          this.BZJdes = res.data[0].remark
            ? res.data[0].remark.replace(/\n/g, "<br/>")
            : "";
        }
      });
    },
      // 查询是否有正在提现的记录
    getTixianing() {
      myMoneyApi
        .withdrawalRecordList({ pageNum: 1, pageSize: 3, state: 1 })
        .then((res) => {
          if (res && res.rows.length && res.rows[0].state == 1) {
            this.TIXIANING = res.rows[0];
          } else {
            this.TIXIANING = "";
          }
        });
    },

        // 点击修改资料
    editShopInfoFn() {
      this.$refs.editShopInfo.open();
    },
    // 打开我的海报
    myHaibao() {
      this.$refs.haibaoDialog.open();
    },
    // 复制
    copyStr(txt) {
      this.$copyText(txt).then(() => {
        this.$message.success("已复制到剪切板");
      });
    },

        // 打开认证弹窗
    openAuth() {
      this.$refs.authDialog.open();
    },
    goLink(val, query, permiStr, hasTimestamp = false) {

      if (!val) {
        return;
      }
      // if (val == "/youzhishangjia") {
      //   return this.$message("正在优化中，请耐心等待...");
      // }
      if (val.indexOf("http") > -1) {
        window.open(val, "_blank");
      } else {
        if (hasTimestamp) {
          // 加时间戳
          const timestamp = new Date().getTime();
          this.$router.push({
            path: val,
            query: {
              ...query,
              timestamp,
            },
          });
        } else {
          this.$router.push({
            path: val,
            query: query || null,
          });
        }

      }
    },

    // 点击充值
    chongzhijifen() {
      this.$refs.chongzhi.open();
      // this.$refs.paySuccess.open();
    },

    chongzhiyue() {
      this.$refs.chongzhiYue.open();
      // this.$refs.paySuccess.open();
    },
     smsChongzhiOpen() {
      this.$refs.smsChongzhi.open();
    },
      openPayBZJ() {
      const money =
        Math.round((this.BZJmoney - this.shopInfo.marginMoney) * 100) / 100;
      this.$refs.payBZJ.open(money, this.BZJmoney || 0);
    },
  }
}
</script>
<style lang="scss" scoped>
@import url('./style.css');

.info-title {
  font-size: 15px;
  font-weight: 600;
  color: #18191A;
}

.edit {
  cursor: pointer;
  margin-right: 24px;
  color: #6C5DD3;
  font-size: 14px;
  text-decoration-line: underline;

  &:last-child {
    margin-right: 4px;
  }
}

.info-con {
  margin-top: 18px;
}

.info-img {
  flex: 0 0 64px;

  img {
    width: 100%;
  }
}

.info-text {
  margin-left: 8px;

  .name {

    font-weight: 600;
    font-size: 14px;
    color: #18191A;
  }

  .name-one {
    margin-left: 4px;
    font-weight: 600;
    font-size: 12px;
    color: #8F92A1;
  }

  .name-two {
    font-weight: 400;
    font-size: 12px;
    color: #8D9094;
    margin-top: 6px;
  }

  .name-three {
    .link {
      color: #6C5DD3;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.tags {
  flex-wrap: wrap;
  margin-top: 10px;
}

.divider {
  background: #EEF1F5;
  margin: 16px 0 26px;
}

.info-container {
  margin-top: 16px;

  .info-container-img {
    padding: 8px;
    width: 48%;
    height: 68px;
    background: url('../../assets/img/index/comp3-1.png') no-repeat;
    background-size: 100%;
  }

  .info-container-img-2 {

    background: url('../../assets/img/index/comp3-2.png') no-repeat;
    background-size: 100%;
  }

  .info-container-img-3 {
    background: url('../../assets/img/index/comp3-9.png') no-repeat;
    background-size: 100%;
  }

  .info-container-img-4 {
    background: url('../../assets/img/index/comp3-10.png') no-repeat;
    background-size: 100%;
  }
}

.info-num {
  color: #6C5DD3;
  font-size: 18px;
  margin-top: 8px;
}

.imgs {
  cursor: pointer;
  height: 20px;
  margin-right: 10px;
  object-fit: contain;
  margin-bottom: 10px;
}

.no-tags {
  padding: 2px 13px;
  color: #414144;
  opacity: 0.6;
  background-color: #f0f0f0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-right: 10px;
}


.chongzhi {
  margin-left: 6px;
  color: #6C5DD3;
  font-size: 12px;
  border-radius: 4px;
  background: #fff;
  padding: 2px 4px;
  cursor: pointer;

  img {
    width: 12px;
    object-fit: contain;
    vertical-align: text-top;
  }
}
.info-container-img {
  .info-title {
   font-size: 14px;
    color: #333;
    font-weight: 400;
}
}
</style>